<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->

<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航 -->
    <div class="bg-white shadow-sm">
      <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-6">
          <span class="text-gray-500">用户服务</span>
          <div class="flex items-center text-sm text-gray-500">
            <span>会员服务</span>
            <span class="mx-1">&gt;</span>
            <span class="text-blue-600">积分管理</span>
          </div>
        </div>
        <div class="flex items-center space-x-4">
          <div class="relative">
            <el-badge :value="1" class="item">
              <el-icon class="text-xl text-gray-600 cursor-pointer"><ShoppingCart /></el-icon>
            </el-badge>
          </div>
          <div class="flex items-center text-gray-600 cursor-pointer">
            <el-icon class="mr-1"><User /></el-icon>
            <span>李明明</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 主内容区 -->
    <div class="container mx-auto px-4 py-6">
      <!-- 积分概览卡片 -->
      <div
        class="bg-gradient-to-r from-purple-600 to-indigo-700 rounded-xl shadow-lg mb-6 overflow-hidden"
      >
        <div class="p-6">
          <h2 class="text-xl font-bold text-white mb-4">积分概览</h2>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <!-- 当前积分 -->
            <div class="bg-white/10 backdrop-blur-sm rounded-lg p-4">
              <div class="flex items-center">
                <div class="w-12 h-12 rounded-full bg-purple-500 flex items-center justify-center">
                  <el-icon class="text-white text-xl"><Coin /></el-icon>
                </div>
                <div class="ml-4">
                  <p class="text-purple-100 text-sm">当前积分</p>
                  <p class="text-white text-2xl font-bold">{{ pointsData.overview.currentPoints}}</p>
                </div>
              </div>
            </div>
            <!-- 累计获得 -->
            <div class="bg-white/10 backdrop-blur-sm rounded-lg p-4">
              <div class="flex items-center">
                <div class="w-12 h-12 rounded-full bg-indigo-500 flex items-center justify-center">
                  <el-icon class="text-white text-xl"><TrendCharts /></el-icon>
                </div>
                <div class="ml-4">
                  <p class="text-purple-100 text-sm">累计获得</p>
                  <p class="text-white text-2xl font-bold">{{ pointsData.overview.totalPoints }}</p>
                </div>
              </div>
            </div>
            <!-- 已使用积分 -->
            <div class="bg-white/10 backdrop-blur-sm rounded-lg p-4">
              <div class="flex items-center">
                <div class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center">
                  <el-icon class="text-white text-xl"><ShoppingCart /></el-icon>
                </div>
                <div class="ml-4">
                  <p class="text-purple-100 text-sm">已使用积分</p>
                  <p class="text-white text-2xl font-bold">{{pointsData.overview.usedPoints}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 积分明细 -->
      <div class="bg-white rounded-xl shadow-sm mb-6 p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-lg font-medium text-gray-800">积分明细</h3>
          <div class="flex space-x-2">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="large"

            />
            <el-select v-model="pointType" placeholder="积分类型" size="large" class="w-32">
              <el-option label="全部" value="全部" />
              <el-option label="获取" value="获取" />
              <el-option label="使用" value="使用" />
            </el-select>
            <el-button @click="handleGetUserPointsConsumption" type="primary" size="large" class="!rounded-button whitespace-nowrap">
              <el-icon class="mr-1"><Search /></el-icon>
              查询
            </el-button>
          </div>
        </div>
        <el-table :data="pointsData.details" style="width: 100%" stripe>
          <el-table-column prop="date" label="日期" width="180" />
          <el-table-column prop="type" label="类型">
            <template #default="scope">
              <el-tag :type="scope.row.type === '获取' ? 'success' : 'danger'" size="small">
                {{ scope.row.type }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="category" label="ai服务" />
          <el-table-column prop="modelName" label="模型名称" />
          <el-table-column prop="description" label="说明" />
          <el-table-column prop="pointsChange" label="积分变动">
            <template #default="scope">
              <span :class="scope.row.pointsChange > 0 ? 'text-green-600' : 'text-red-600'">
                {{ scope.row.pointsChange > 0 ? '+' : '' }}{{ scope.row.pointsChange }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="balance" label="积分余额" />
        </el-table>
        <div class="flex justify-end mt-4">
          <el-pagination
            v-model:current-page="currentPage"
            :page-size="10"
            layout="prev, pager, next"
            :total="totalRecords"
            @current-change="handlePageChange"
          />
        </div>
      </div>


      <!-- 积分规则和趋势 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <!-- 积分趋势图 -->
        <div class="bg-white rounded-xl shadow-sm p-6">
          <h3 class="text-lg font-medium text-gray-800 mb-4">积分趋势</h3>
          <div class="h-64">
            <div ref="pointsChartRef" class="w-full h-full"></div>
          </div>
        </div>

        <!-- 积分规则 -->
        <div class="bg-white rounded-xl shadow-sm p-6">
          <h3 class="text-lg font-medium text-gray-800 mb-4">积分规则</h3>
          <el-tabs>
            <el-tab-pane label="获取规则">
              <ul class="space-y-3">
                <li class="flex items-start">
                  <div
                    class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3 flex-shrink-0"
                  >
                    <el-icon class="text-blue-600"><ShoppingCart /></el-icon>
                  </div>
                  <div>
                    <p class="text-gray-700 font-medium">消费获取</p>
                    <p class="text-sm text-gray-500">每消费1元获得10积分</p>
                  </div>
                </li>
                <li class="flex items-start">
                  <div
                    class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3 flex-shrink-0"
                  >
                    <el-icon class="text-green-600"><Calendar /></el-icon>
                  </div>
                  <div>
                    <p class="text-gray-700 font-medium">每日签到</p>
                    <p class="text-sm text-gray-500">每日签到获得10积分，连续签到额外奖励</p>
                  </div>
                </li>
                <li class="flex items-start">
                  <div
                    class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3 flex-shrink-0"
                  >
                    <el-icon class="text-purple-600"><Share /></el-icon>
                  </div>
                  <div>
                    <p class="text-gray-700 font-medium">邀请好友</p>
                    <p class="text-sm text-gray-500">每成功邀请1位好友注册获得100积分</p>
                  </div>
                </li>
                <li class="flex items-start">
                  <div
                    class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-3 flex-shrink-0"
                  >
                    <el-icon class="text-yellow-600"><ChatDotRound /></el-icon>
                  </div>
                  <div>
                    <p class="text-gray-700 font-medium">使用AI服务</p>
                    <p class="text-sm text-gray-500">每日首次使用AI服务获得20积分</p>
                  </div>
                </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="使用规则">
              <ul class="space-y-3">
                <li class="flex items-start">
                  <div
                    class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center mr-3 flex-shrink-0"
                  >
                    <el-icon class="text-red-600"><GoodsFilled /></el-icon>
                  </div>
                  <div>
                    <p class="text-gray-700 font-medium">兑换商品</p>
                    <p class="text-sm text-gray-500">可使用积分兑换实物商品或虚拟商品</p>
                  </div>
                </li>
                <li class="flex items-start">
                  <div
                    class="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center mr-3 flex-shrink-0"
                  >
                    <el-icon class="text-orange-600"><Discount /></el-icon>
                  </div>
                  <div>
                    <p class="text-gray-700 font-medium">兑换优惠券</p>
                    <p class="text-sm text-gray-500">可使用积分兑换各类优惠券和折扣</p>
                  </div>
                </li>
                <li class="flex items-start">
                  <div
                    class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3 flex-shrink-0"
                  >
                    <el-icon class="text-indigo-600"><Service /></el-icon>
                  </div>
                  <div>
                    <p class="text-gray-700 font-medium">兑换服务</p>
                    <p class="text-sm text-gray-500">可使用积分兑换AI服务使用次数</p>
                  </div>
                </li>
                <li class="flex items-start">
                  <div
                    class="w-8 h-8 rounded-full bg-teal-100 flex items-center justify-center mr-3 flex-shrink-0"
                  >
                    <el-icon class="text-teal-600"><TrendCharts /></el-icon>
                  </div>
                  <div>
                    <p class="text-gray-700 font-medium">会员等级提升</p>
                    <p class="text-sm text-gray-500">积分可用于提升会员等级和成长值</p>
                  </div>
                </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="有效期">
              <div class="p-4 bg-gray-50 rounded-lg">
                <p class="text-gray-700 mb-2">积分有效期规则：</p>
                <ul class="list-disc pl-5 space-y-2 text-sm text-gray-600">
                  <li>积分自获取之日起有效期为1年</li>
                  <li>到期前未使用的积分将自动失效</li>
                  <li>系统将优先使用即将到期的积分</li>
                  <li>钻石会员及以上等级积分有效期延长至2年</li>
                  <li>特殊活动获得的积分可能有单独的有效期，以活动规则为准</li>
                </ul>
                <div class="mt-4 flex items-center">
                  <el-icon class="text-yellow-500 mr-2"><Warning /></el-icon>
                  <p class="text-yellow-600 text-sm">
                    您有 <span class="font-bold">500</span> 积分将于30天内过期，请及时使用
                  </p>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import {
  Search,
  Filter,
  User,
  Lock,
  Bell,
  ChatDotRound,
  Picture,
  VideoPlay,
  Star,
  Coin,
  ShoppingBag,
  Document,
  Collection,
  Upload,
  Plus,
  ShoppingCart,
  ArrowRight,
  Refresh,
  Download,
  Trophy,
  Share,
  Calendar,
  Crown,
  TrendCharts,
  GoodsFilled,
  Discount,
  Service,
  Warning,
} from '@element-plus/icons-vue'

import { useRouter1 } from '../utils/useRoute'

import {
  PointsData,
  getUserPointsDetail,
  getUserPointsInfo,
  getConsumptionByMonth,
  type ConsumptionRequest
} from '@/api/vip.ts'

onMounted(() =>{
  const pageInfo = {
    page: 1,
    limit: 10
  }
  const param: ConsumptionRequest = {
    keyword: '全部',
    startTime: 0,
    endTime: 0,
    page: pageInfo
  }
  getConsumptionsPointsInfo(param);
  getUserPointsInfo().then(res => {
    pointsData.value.overview = res
  })
  getConsumptionByMonth().then(res => {

  })
})

const handleGetUserPointsConsumption = () => {
  const pageInfo = {
    page: currentPage.value,
    limit: 10
  }
  const param: ConsumptionRequest = {
    keyword: pointType.value,
    startTime: dateRange.value.length == 2 ? new Date(dateRange.value[0]).getTime() : 0,
    endTime: dateRange.value.length == 2 ? new Date(dateRange.value[1]).getTime() : 0,
    page: pageInfo
  }

  getConsumptionsPointsInfo(param);
}
const pageInfo = ref({
  page: 1,
  limit: 10
})
const pointsData = ref<PointsData>({
  overview: {
    currentPoints: 8765,
    totalPoints: 12456,
    usedPoints: 3691
  },
  details: [
    {
      date: '2025-05-04',
      type: '获取',
      description: '每日签到',
      pointsChange: 10,
      balance: 8765
    },
    {
      date: '2025-05-03',
      type: '获取',
      description: '购买AI对话高级套餐',
      pointsChange: 199,
      balance: 8755
    },
    {
      date: '2025-05-02',
      type: '获取',
      description: '使用AI服务奖励',
      pointsChange: 20,
      balance: 8556
    },
    {
      date: '2025-04-30',
      type: '使用',
      description: '兑换AI绘图次数包',
      pointsChange: -500,
      balance: 8536
    }
  ]
})
// 积分明细相关数据
const dateRange = ref([])
const pointType = ref('全部')
const currentPage = ref(1)
const totalRecords = ref(100)

// 积分兑换相关数据
const exchangeCategory = ref('all')
const exchangeSort = ref('popular')
const exchangePage = ref(1)
const totalExchangeItems = ref(24)
const search = ref({
  keyword: 'all',
  startTime: 0,
  endTime: 0,
})

// 积分图表相关
const pointsChartRef = ref<HTMLElement | null>(null)
let pointsChart: echarts.ECharts | null = null

// 积分明细数据
const pointsRecords = ref([
  {
    date: '2025-05-04',
    type: '获取',
    description: '每日签到',
    points: 10,
    balance: 8765,
  },
  {
    date: '2025-05-03',
    type: '获取',
    description: '购买AI对话高级套餐',
    points: 199,
    balance: 8755,
  },
  {
    date: '2025-05-02',
    type: '获取',
    description: '使用AI服务奖励',
    points: 20,
    balance: 8556,
  },
  {
    date: '2025-04-30',
    type: '使用',
    description: '兑换AI绘图次数包',
    points: -500,
    balance: 8536,
  },
  {
    date: '2025-04-28',
    type: '使用',
    description: '兑换优惠券',
    points: -1000,
    balance: 9036,
  },
  {
    date: '2025-04-25',
    type: '获取',
    description: '邀请好友奖励',
    points: 100,
    balance: 10036,
  },
  {
    date: '2025-04-20',
    type: '获取',
    description: '购买会员服务',
    points: 999,
    balance: 9936,
  },
  {
    date: '2025-04-15',
    type: '使用',
    description: '兑换高级充电宝',
    points: -1800,
    balance: 8937,
  },
  {
    date: '2025-04-10',
    type: '获取',
    description: '连续签到7天奖励',
    points: 50,
    balance: 10737,
  },
  {
    date: '2025-04-05',
    type: '获取',
    description: '商城消费奖励',
    points: 350,
    balance: 10687,
  },
])

// 处理分页变化
const handlePageChange = (page: number) => {
  currentPage.value = page
  // 这里可以添加获取对应页数据的逻辑
  console.log(currentPage.value)

  const pageInfo = {
    page: currentPage.value,
    limit: 10
  }
  const param: ConsumptionRequest = {
    keyword: pointType.value,
    startTime: dateRange.value.length == 2 ? new Date(dateRange.value[0]).getTime() : 0,
    endTime: dateRange.value.length == 2 ? new Date(dateRange.value[1]).getTime() : 0,
    page: pageInfo
  }

  getConsumptionsPointsInfo(param);
}

const getConsumptionsPointsInfo = (param: ConsumptionRequest) => {

  getUserPointsDetail(param).then(res => {
    console.log(res)
    pointsData.value.details = res.data;

  })
}

// 处理兑换分页变化
const handleExchangePageChange = (page: number) => {
  exchangePage.value = page
  // 这里可以添加获取对应页兑换商品数据的逻辑
}

// 初始化积分趋势图表
const initPointsChart = () => {
  if (pointsChartRef.value) {
    pointsChart = echarts.init(pointsChartRef.value)

    const option = {
      animation: false,
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      legend: {
        data: ['获取积分', '使用积分'],
        bottom: 0,
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '15%',
        top: '10%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月'],
      },
      yAxis: [
        {
          type: 'value',
          name: '积分数量',
          position: 'left',
        },
        {
          type: 'value',
          name: '积分余额',
          position: 'right',
        },
      ],
      series: [
        {
          name: '获取积分',
          type: 'bar',
          barWidth: 15,
          data: [620, 732, 801, 934, 1290],
          itemStyle: {
            color: '#10b981',
          },
        },
        {
          name: '使用积分',
          type: 'bar',
          barWidth: 15,
          data: [120, 132, 101, 134, 290],
          itemStyle: {
            color: '#ef4444',
          },
        },
      ],
    }
    getConsumptionByMonth().then(data => {
      option.xAxis.data = data.map(item => item.date);
      option.series[0].data = data.map(item => item.income);
      option.series[1].data = data.map(item => item.outcome);
      pointsChart.setOption(option)
    })
  }
}

// 监听窗口大小变化，调整图表大小
const handleResize = () => {
  if (pointsChart) {
    pointsChart.resize()
  }
}

onMounted(() => {
  initPointsChart()
  window.addEventListener('resize', handleResize)
})
</script>

<style scoped>
.el-pagination {
  --el-pagination-button-bg-color: #fff;
  --el-pagination-hover-color: #409eff;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.el-tabs__item.is-active {
  color: #3b82f6;
}

.el-tabs__active-bar {
  background-color: #3b82f6;
}

.el-input {
  border-none: true;
}

.el-button.is-text {
  border-none: true;
}
</style>
